<template>
  <div class="pokemon-details">
    <div class="details-container">
      <div class="pokemon-image-container">
        <img
            :src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`"
            :alt="pokemon.name"
            class="pokemon-detail-image"
        />
      </div>
      <div class="pokemon-stats">
        <div class="stats-header">
          <h2 class="detail-name">{{ pokemon.name }}</h2>
          <p class="detail-level">Lv. {{ pokemon.level }}</p>
        </div>
        <div class="type-badges">
          <span
              v-for="(type, index) in pokemon.type.split('/')"
              :key="index"
              class="type-badge"
              :style="{ backgroundColor: getTypeColor(type) }"
          >
            {{ type }}
          </span>
        </div>
        <div class="stats-grid" :class="{ 'two-columns': gridColumns === 2 }">
          <div class="stat-item">
            <p class="stat-label">生命值</p>
            <div class="stat-bar-container">
              <div class="stat-bar">
                <div
                    class="stat-fill hp-fill"
                    :style="{ width: `${(pokemon.hp / 150) * 100}%` }"
                ></div>
              </div>
              <span class="stat-value">{{ pokemon.hp }}</span>
            </div>
          </div>
          <div class="stat-item">
            <p class="stat-label">攻击</p>
            <div class="stat-bar-container">
              <div class="stat-bar">
                <div
                    class="stat-fill attack-fill"
                    :style="{ width: `${(pokemon.attack / 150) * 100}%` }"
                ></div>
              </div>
              <span class="stat-value">{{ pokemon.attack }}</span>
            </div>
          </div>
          <div class="stat-item">
            <p class="stat-label">防御</p>
            <div class="stat-bar-container">
              <div class="stat-bar">
                <div
                    class="stat-fill defense-fill"
                    :style="{ width: `${(pokemon.defense / 150) * 100}%` }"
                ></div>
              </div>
              <span class="stat-value">{{ pokemon.defense }}</span>
            </div>
          </div>
          <div class="stat-item">
            <p class="stat-label">速度</p>
            <div class="stat-bar-container">
              <div class="stat-bar">
                <div
                    class="stat-fill speed-fill"
                    :style="{ width: `${(pokemon.speed / 150) * 100}%` }"
                ></div>
              </div>
              <span class="stat-value">{{ pokemon.speed }}</span>
            </div>
          </div>
          <div class="stat-item">
            <p class="stat-label">特防</p>
            <div class="stat-bar-container">
              <div class="stat-bar">
                <div
                    class="stat-fill specialDefense-fill"
                    :style="{ width: `${(pokemon.specialDefense / 150) * 100}%` }"
                ></div>
              </div>
              <span class="stat-value">{{ pokemon.specialDefense }}</span>
            </div>
          </div>
          <div class="stat-item">
            <p class="stat-label">特攻</p>
            <div class="stat-bar-container">
              <div class="stat-bar">
                <div
                    class="stat-fill specialAttack-fill"
                    :style="{ width: `${(pokemon.specialAttack / 150) * 100}%` }"
                ></div>
              </div>
              <span class="stat-value">{{ pokemon.specialAttack }}</span>
            </div>
          </div>
        </div>
        <div class="moves-section">
          <p class="moves-label">技能</p>
          <div class="moves-grid">
            <div
                v-for="(move, index) in pokemon.moves"
                :key="index"
                class="move-item"
            >
              <span class="move-name">{{ move.name }}</span>
              <span
                  class="type-badge"
                  :style="{ backgroundColor: getTypeColor(move.type) }"
              >
                {{ move.type }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props  = defineProps({
  pokemon: {
    type: Object,
    required: true
  },
  typeColorMap: {
    type: Object,
    required: true
  },
  gridColumns: {
    type: Number,
    default: 1
  }
});

const getTypeColor = (type) => {
  return props.typeColorMap[type] || '#9e9e9e';
};
</script>

<style scoped>
.pokemon-details {
  margin-top: 24px;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
}

.details-container {
  display: flex;
}

.pokemon-image-container {
  background-color: #eee;
  border-radius: 8px;
  padding: 12px;
  margin-right: 16px;
}

.pokemon-detail-image {
  width: 96px;
  height: 96px;
}

.pokemon-stats {
  flex: 1;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.detail-name {
  font-size: 24px;
  font-weight: bold;
}

.detail-level {
  font-size: 14px;
  background-color: #eee;
  padding: 4px 8px;
  border-radius: 4px;
}

.type-badges {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.type-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

.stats-grid.two-columns {
  grid-template-columns: 1fr 1fr;
}

.stat-item {
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.stat-bar-container {
  display: flex;
  align-items: center;
}

.stat-bar {
  flex: 1;
  height: 8px;
  background-color: #eee;
  border-radius: 4px;
  margin-right: 8px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  transition: width 0.5s;
}

.hp-fill {
  background-color: #8AC654;
}

.attack-fill {
  background-color: #F8CB3C;
}

.defense-fill {
  background-color: #D98837;
}

.speed-fill {
  background-color: #A456D0;
}

.specialDefense-fill {
  background-color: #5890CD;
}

.specialAttack-fill {
  background-color: #59C3D0;
}

.stat-value {
  font-size: 14px;
}

.moves-section {
  margin-top: 16px;
}

.moves-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.moves-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.move-item {
  background-color: #eee;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.move-name {
  flex: 1;
}

@media (max-width: 600px) {
  .details-container {
    flex-direction: column;
  }

  .pokemon-image-container {
    margin-right: 0;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>